import React, {Component} from 'react'
import Breadcrumb from '../base/Breadcrumb'
import { withRouter } from 'react-router-dom'
import { Button } from 'element-react'
import Pagination from '../base/Pagination'

class deliveryOrder extends Component {
  constructor (props) {
    super(props)
    this.state = {
      orderListData: [],
      // 总条数
      total: 0,
      pageNo: 0
    }
  }
  look (obj) {
    let orderInfo = JSON.stringify({orderId: obj.id, userId: obj.userId, userName: obj.userName})
    localStorage.setItem('orderInfo', orderInfo)
    this.props.history.push({
      pathname: `/orderDetail/deliveryOrder`
    })
  }
  changePage (nowPage) {
    this.setState({
      pageNo: nowPage - 1
    }, () => {
      this.queryOrderList()
    })
  }
  componentDidMount () {
    this.queryOrderList()
  }
  queryOrderList () {
    this.$ajax.queryAllDelivery({
      pageNo: this.state.pageNo,
      size: 10
    }).then(res => {
      if (res.code === 200) {
        console.log(res.data)
        this.setState({
          orderListData: res.data.content,
          total: res.data.totalElements
        })
      }
    })
  }
  render () {
    return (
      <div>
        <Breadcrumb data={['订单', '派件订单列表']}/>
        <div>
          <table className="table">
            <tbody>
            <tr>
              <th>订单ID</th>
              <th>用户ID</th>
              <th>订单价格</th>
              <th>订单状态</th>
              <th>操作</th>
            </tr>
            {
              this.state.orderListData.length > 0 ? this.state.orderListData.map((a, index) => {
                return (
                    <tr key={index}>
                      <td>{a.id}</td>
                      <td>{a.userId}</td>
                      <td>{a.price}</td>
                      <td>
                        {a.status === 1 ? '创建订单，等待付款' : ''}
                        {a.status === 2 ? '取消订单（已付款）' : ''}
                        {a.status === 3 ? '取消订单（未付款）' : ''}
                        {a.status === 4 ? '待发货' : ''}
                        {a.status === 5 ? '待收货' : ''}
                        {a.status === 6 ? '待发货(缺货)' : ''}
                        {a.status === 7 ? '完成' : ''}
                        {a.status === 8 ? '已关闭（未付款）' : ''}
                      </td>
                      <td>
                        <Button type="info" size="small" onClick={this.look.bind(this, a)}>查看</Button>
                      </td>
                    </tr>
                )
              }) : <tr><td colSpan={5}>暂无数据</td></tr>
            }
            </tbody>
          </table>
        </div>
        <Pagination total={this.state.total} changePage={this.changePage.bind(this)}/>
      </div>
    )
  }
}

export default withRouter(deliveryOrder)
